<template>
  <div class="ban-role-warp" :style="styleHeight">
    <div class="ban-role-warp-box" ref="banRoleWarpBoxRef">
      <el-form :inline="true"  ref="ban" size="small" style="height:51px;overflow:hidden;">
        <el-form-item label="班级名称">
          <el-input placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
          <el-button type="info" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
          <el-button type="success" icon="el-icon-plus" @click="addMenu(-1)">新增用户</el-button>
        </el-form-item>
      </el-form>

      <div class="grid-content bg-purple">
        <el-table
            :border="true"
            ref="multipleTable"
            :data="allGrade"
            tooltip-effect="dark"
            style="width: 100%"
            :default-sort = "{}"
        >
          <el-table-column
              type="selection"
              width="">
          </el-table-column>
          <el-table-column
              prop="bname"
              label="班级名称"
              width=""
              sortable>
          </el-table-column>
          <el-table-column
              prop="bnumber"
              label="人数"
              width=""
              sortable
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="success "
                  @click="addMenu(scope.row.id)">编辑</el-button>

              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <el-dialog
          :before-close="handleClose"
          :title="title"
          :visible.sync="dialogVisible"
          width="50%"
      >
        <el-form  label-width="80px" :model="ban">
          <el-form-item label="班级名称">
            <el-input v-model="ban.bname"></el-input>
          </el-form-item>
          <el-form-item label="班级人数">
            <el-input type="bNumber" v-model="ban.bnumber"></el-input>
          </el-form-item>
          <el-form-item label="年级">
            <el-input type="grade"  v-model="ban.grade"></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false, handleClose" >取 消</el-button>
          <el-button type="primary" @click="updateAndSaveban">确 定</el-button>
        </span>
        {{ban}}
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { updateAndSaveban,getBanJiById} from '@/api/Ban/index'
import {getAllClassByFid} from '@/api/user/index'
import { getSession } from "@/utils/storage";


export default {
  name: 'ban-list',

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  data() {
    return {
      ban:{grade:2017,fId:this.fid},
      fid:'',
      title:'',
      allGrade:[],
      dialogVisible: false,
    }
  },
  computed: {
    // 动态高度，适配各布局。单页面的画，高度设为100%即可。
    styleHeight() {
      let { layout, isTagsView } = this.$store.state.layoutConfig;
      if (layout === 'fashion' || layout === 'strange') {
        if (isTagsView) {
          return {
            height: `calc(100vh - 84px)`
          }
        } else {
          return {
            height: `calc(100vh - 50px)`
          }
        }
      } else {
        return {
          height: `calc(100vh - 50px)`
        }
      }
    }
  },
  mounted() {
    this.getbanInfo();
    this.getAllClass(this.fid);
  },
  methods: {
    open2() {
      this.$notify({
        title: '警告',
        message: '该班级下有关联信息，不可以删除',
        type: 'warning'
      });
    },
    //关闭按钮
    handleClose(done){
      this.ban={grade:2017,fId:''}
      done();

    },
    //获取缓存
    getbanInfo(){
      this.fid = getSession('userInfo').finstructor.id;
      this.ban.fid = getSession('userInfo').finstructor.id;
    },
    //通过辅导员id查询所管辖的班级
    getAllClass(value){
      getAllClassByFid(value).then(res => {
        this.allGrade = res.data;
      }).catch(() => {})
    },

    // 查询
    onSearch() {
    },
    // 重置
    onReset() {

    },
    // 新增
    addMenu(value) {
      this.dialogVisible= true;
      if (value===-1){
        this.title='新增班级'
      }else {
        this.title='修改班级';
        getBanJiById(value).then(res=>{
          this.ban= res.data;
        }).catch(()=>{})
      }
    },
    updateAndSaveban(){
      updateAndSaveban(this.ban).then(res=>{

        if (!res.code===200){
          this.$message.error("操作失败");
          return;
        }
        this.$message.success('操作成功！')
        this.dialogVisible= false;
        this.ban={};
        this.getAllClass(this.fid);
      }).catch(res=>{
        this.$message.success(res.msg)
      })
    },
    handleDelete() {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.open2();
      })
    }
  }
};
</script>

<style scoped lang="scss">
.ban-role-warp {
  border-radius: 0px;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  .ban-role-warp-box {
    padding: 15px;
    height: 100%;
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03) !important;
  }
  .selected {
    width: 100%;
  }
}
</style>
